Self closing으로 쓰셔도 됩니다!

문법상 isLoggedIn이 맞습니다.
간단한 단어 교정이나 오타 검증은 아래 extension 도움을 받아보세요! :)

streetsidesoftware.code-spell-checker

네이밍이 조금 모호하네요. api 요청에 의한 response data라면 ProductData정도가 적당할것같습니다 :)

해당 context는 src 바로 밑에 있어서, 일반적으로 단일 페이지가 아닌 여러 페이지에서 공유되는 공용 목적으로 쓰입니다.
만약 특정 페이지에서만 쓰이는 context라면 사용하는 입장에서 찾기 쉽게 폴더 및 파일을 이동하시는게 좋을것같아요.

아래 아티클 참고해보시고, 성주님이 쓰기 좋은 방식으로 개선해보세요!
참고

type이 의존성 배열에 포함되어있지않아 type이 변경되어도 pageSize가 재계산되지 않을 수 있다는 문제가 생길 수 있어요. 아마 eslint 사용하시면 기본 규칙에 포함되어있어서 관련해서 워닝이 표시될텐데 사용해보시는걸 추천드립니다! :)

구조상, 이 커스텀훅을 사용하는 모든 컴포넌트에서 입력 필드가 변경될때마다 상태가 바뀌고, 해당 훅을 사용하는 모든 컴포넌트가 리렌더링되는 문제가 발생해요.

이 훅을 유지하면서도(구조를 크게 바꾸지않으면서도) 문제를 개선하기 위해서는, 각 입력 필드의 유효성 검사 결과를 선택적으로(필요할때만) 구독할 수 있도록 구현해주는게 좋을것같아요.

useReducer 훅을 사용해 개별적인 상태 업데이트 로직을 관리하고, 항상 모든 입력필드의 state 변경을 감지하지않고 특정 state가 바뀌지 않는 한 같은 결과를 재사용할수있도록 메모이제이션 해주면 어떨까요?

예시를 작성해드릴게요 :)

• useReducer를 사용해 상태 업데이트

const initialState = {
  values: {},
  errors: {},
  errorMessages: {},
  isValid: {},
};

function validationReducer(state, action) {
  switch (action.type) {
    case "SET_VALUE": {
      const { name, value } = action.payload;
      const validator = validRuleObj[name];
      const isValid = validator.isValid(value, state.values["user-password"]);
      const errorMessage = isValid ? "" : validator.getErrorMessage(value);

      return {
        ...state,
        values: { ...state.values, [name]: value },
        errors: { ...state.errors, [name]: !isValid },
        errorMessages: { ...state.errorMessages, [name]: errorMessage },
        isValid: { ...state.isValid, [name]: isValid },
      };
    }
    default:
      return state;
  }
}

그 다음 useValidate 훅에서 해당 reducer를 사용해 상태 업데이트를 관리하면서도, 특정 state가 바뀌지 않는 한 같은 결과를 재사용할수있도록 메모이제이션해주면:

export function useValidate() {
  const [state, dispatch] = useReducer(validationReducer, initialState);

  const setValue = useCallback((name, value) => {
    dispatch({ type: "SET_VALUE", payload: { name, value } });
  }, []);

  const getFieldState = useCallback(
    (name) => {
      return {
        value: state.values[name] || "",
        error: state.errors[name] || false,
        errorMessage: state.errorMessages[name] || "",
        isValid: state.isValid[name] || false,
      };
    },
    [state]
  );

  return {
    setValue,
    getFieldState,
  };
}

이런 장점이 생겨요.

• useReducer를 사용하여 상태 업데이트 로직을 더 예측 가능하게 (간소화) 만들 수 있습니다.
• 각 입력 필드의 상태를 선택적으로 구독할 수 있어 불필요한 리렌더링을 방지합니다.
• 사용하는 입장에서도, getFieldState 함수를 통해 각 필드의 상태를 쉽게 가져올 수 있습니다.
• 컴포넌트에서 필드별 유효성 검사를 수행할때마다 훅 인스턴스를 생성하지않아도되고 (복잡도를 떨어트리는것또한 준수한 코드 퀄리티를 유지하기위해 중요), 하나의 훅 실행으로 모든 상태를 관리하게 만들 수 있습니다.

이렇게 구조를 바꿔주면 유효성 검사를 수행해야하는 컴포넌트에서는

const validation = useValidate();
const emailState = validation.getFieldState("user-email");

// 입력 필드에서
<input
  value={emailState.value}
  onChange={(e) => validation.setValue("user-email", e.target.value)}
/>

이런식으로 useValidate 훅을 한번만 실행하고, 상태 업데이트를 원하는 입력 필드만 선택적으로 연결해 사용하는게 가능해지죠? :)

위에 useValidate 훅 구조 개선 관련해 코멘트 참고해보시고, 이런식으로 여러개의 훅 인스턴스를 생성하지않도록 해봅시다! :)

요렇게 많이 쓰시네요 내부에 children이 없으면 <ProductsFilterBar /> 이렇게 쓰시는게 간편합니다!

굳굳! 재사용 가능한 로직(페이지네이션 기능과 관련된 로직)은 커스텀훅으로 따로 또 분리해주면 재사용성을 극대화할수있어요 :)

나중에 새로운 형태의 Pagination UI가 추가될때 이 Pagination 컴포넌트에 props로 추가해 조건부 렌더링을 하기보다는 새 Pagination 컴포넌트를 만들어서 커스텀 훅을 사용해주면 용이하겠죠?

혹은, 기존 Pagination 컴포넌트에 합성 패턴을 사용해 UI도 재사용 가능한 단위로 분리하고 조합해 사용해주는 방법도 있고요 :)

참고